<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref, toRefs} from 'vue';

import RecordEntityTable from './components/RecordEntityTable.vue';
import RecordFormHeader from './components/RecordFormHeader.vue';
import {RecordQueryParam} from "@/api/cloud/table/record/types";
import {useRouter} from "vue-router";
import {getSchemaEntity} from "@/api/cloud/table/schema";
import {EntityTable} from "@/api/cloud/table/schema/types";


const recordEntityTableRef = ref<any>(); // 这了的变量名称必须和<deviceRecord-edit-dialog>的ref值一样
const recordFormHeaderRef = ref<any>(); // 这了的变量名称必须和<deviceRecord-edit-dialog>的ref值一样

const dataState = reactive({
  // 字段信息
  table: {} as EntityTable,
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RecordQueryParam,
});

const {
  // 字段信息
  table,
  // 查询参数
  queryParams,
} = toRefs(dataState);


/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  queryParams.value = value;
  recordEntityTableRef.value.refreshTable(queryParams.value);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(async() => {
  // 获得当前路由信息：也就是地址栏上的信息，其中的查询参数带有EntityType
  const router = useRouter();
  const queryParam = router.currentRoute.value.query;
  dataState.queryParams.entityType = queryParam.name as string;

  // 查询结构化数据
  await getSchemaEntity(dataState.queryParams.entityType).then(({data}) => {
    table.value = data;
  });

  let entityType = dataState.queryParams.entityType;

  // 传递参数
  recordEntityTableRef.value.setEntity(entityType, table.value);
  recordFormHeaderRef.value.setEntity(entityType, table.value);
});

</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <record-form-header ref="recordFormHeaderRef"
                        @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <record-entity-table ref="recordEntityTableRef"
    />


  </div>
</template>
